<template>
	<!-- <view class="detail" @click.capture ="showYear = false"> -->
	<view class="detail" @click="closeAll">
		<view class="date-select flex">
			<view class="years date-common flex" @click.stop="showYear=!showYear">

				{{years}}年
				<u-icon name="arrow-up-fill" v-if="!showYear" style="margin: 2rpx 0 0 22rpx;" color="#64B6A8">
				</u-icon>
				<u-icon name="arrow-down-fill" v-else style="margin: 4rpx 0 0 22rpx;" color="#64B6A8">
				</u-icon>

				<view class="draw-down" v-show="showYear">
					<view @click="chooseYear(item)" v-for="(item,i) in yearsList" :key="i">{{item}}年</view>
				</view>
			</view>
			<view class="month-day date-common flex" @click.stop="showMonth= !showMonth">
				{{month}}月<u-icon name="arrow-up-fill" v-if="!showMonth" style="margin: 4rpx 0 0 22rpx;"
					color="#64B6A8">
				</u-icon>
				<u-icon name="arrow-down-fill" v-else style="margin: 4rpx 0 0 22rpx;" color="#64B6A8">
				</u-icon>
				<view class="draw-down" v-show="showMonth">
					<view @click="chooseMonth(item)" v-for="(item,i) in monthList" :key="i">{{item}}月</view>
				</view>
			</view>
		</view>
		<view class="" v-if="month == '选择'">
			<!-- <view class="detail-list" v-for="(item,key,index) in detailsData" :key="index"> -->
			<view class="detail-list" v-for="(item,index) in dataList" :key="index">
				<view class="detail-date flex">
					<view class="date-left">
						{{dateList[index]}}
					</view>
					<view class="date-total">
						<!-- #ifdef APP-PLUS -->
						合计
						{{total[index]}}
						<!-- #endif -->
						<!-- #ifdef H5 -->
						合计
						{{total[index]}}
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						合计
						{{total[index]}}
						<!-- #endif -->
					</view>
				</view>
				<view class="detail-li flex" v-for="(ite,i) in item" :key="i"
					@click="goDetailSon(dateList[index],ite.title,ite.number)">
					<view class="type">
						{{ite.title}}
					</view>
					<view class="num">
						{{ite.title == "打赏支出"?"-" : "+"}}{{ite.integral || ite.rewardQuantity}}
					</view>
				</view>
			</view>
		</view>

		<view class="" v-if="month !=='整年'">
			<view class="detail-list" v-for="(item,index) in dataList" :key="index">
				<view class="" v-show="dateList[index].substring(5) == month">
					<view class="detail-date flex">
						<view class="date-left">
							{{dateList[index]}}
						</view>
						<view class="date-total">
							<!-- #ifdef APP-PLUS -->
							合计
							{{total[index]}}
							<!-- #endif -->
							<!-- #ifdef H5 -->
							合计
							{{total[index]}}
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							合计
							{{total[index]}}
							<!-- #endif -->
						</view>
					</view>
					<view class="detail-li flex" v-for="(ite,i) in item" :key="i"
						@click="goDetailSon(dateList[index],ite.title,ite.number)">
						<view class="type">
							{{ite.title}}
						</view>
						<view class="num">
							{{ite.title == "打赏支出"?"-" : "+"}}{{ite.integral || ite.rewardQuantity}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showYear: false,
				showMonth: false,
				month: "选择",
				years: "",
				monthList: [
					"01",
					"02",
					"03",
					"04",
					"05",
					"06",
					"07",
					"08",
					"09",
					"10",
					"11",
					"12",
				],
				yearsList: [],
				userInfo: uni.getStorageSync("Pduser"),
				detailsData: {},
				dataList: [],
				dateList: [],
				total: []
			}
		},
		onLoad() {
			this.addDate()
		},
		computed: {
			// totals() {
			// 	let num = []
			// 	console.log(this.detailsData)
			// 	for (let i in this.detailsData) {
			// 		let all = 0
			// 		this.detailsData[i].forEach(el => {
			// 			all += el.integral
			// 			if (el.title.includes("关注") || el.title.includes("收藏")) {
			// 				el.title = "关注/收藏（楼盘、门店、用户、房源）"
			// 			}
			// 		})
			// 		num.push(all)
			// 		console.log(num)
			// 	}
			// 	this.total = num
			// 	return num
			// }
		},
		methods: {
			closeAll() {
				this.showMonth = false
				this.showYear = false
			},

			getDetails() {
				this.$myRequest
					.get("/mob/iteration/selectIntegralByYear", {
						userId: this.userInfo.id,
						year: this.years,
					}).then(res => {
						let data = {}
						/* 后端接口返回未排序，前端旋转 */
						res.RewardExpenditureRecords.reverse()
						res.RewardIncomeRecords.reverse()

						res.RewardExpenditureRecords.forEach(el => {
							if (!Array.isArray(data[el.createDate.slice(0, 7)])) {
								data[el.createDate.slice(0, 7)] = []
								data[el.createDate.slice(0, 7)].push(el)
							} else {
								data[el.createDate.slice(0, 7)][0].rewardQuantity += el.rewardQuantity
							}

						})
						res.RewardIncomeRecords.forEach(el => {
							if (!Array.isArray(data[el.createDate.slice(0, 7)])) {
								// 没有当前月份数据时
								data[el.createDate.slice(0, 7)] = []
								data[el.createDate.slice(0, 7)].push(el)
							} else {
								// 有当前月份数据时
								if (data[el.createDate.slice(0, 7)][0].title == "打赏支出" && data[el.createDate
										.slice(0, 7)].length == 1) {
									console.log(1)
									data[el.createDate.slice(0, 7)].push(el)
								} else {
									console.log(2)
									if (data[el.createDate.slice(0, 7)][0].title == "打赏收入") {
										data[el.createDate.slice(0, 7)][0].rewardQuantity += el.rewardQuantity
									} else {
										data[el.createDate.slice(0, 7)][1].rewardQuantity += el.rewardQuantity
									}
								}
							}

						})
						res.recordList.forEach(el => {
							if (!Array.isArray(data[el.date])) {
								data[el.date] = []
								data[el.date].push(el)
							} else {
								data[el.date].push(el)
							}

						})
						// 对象key的排序
						let dataKeys = Object.keys(data).sort((a, b) => {
							if (a < b) {
								return 1;
							}
							if (a > b) {
								return -1;
							}
							return 0;
						})
						console.log(dataKeys, 90)
						let newData = {}
						dataKeys.forEach((val) => {
							newData[val] = data[val]
						})
						this.detailsData = newData;
						let num = []
						for (let i in this.detailsData) {
							let all = 0
							this.dataList.push(this.detailsData[i])
							this.dateList.push(i)
							this.detailsData[i].forEach(el => {
								all += el.integral || el.rewardQuantity
								// if (el.title.includes("关注/") || el.title.includes("收藏")) {
								// 	el.title = "关注/收藏(楼盘、门店、用户、房源、看点)"
								// }
							})
							num.push(all.toString())
						}
						this.total = num
						console.log(this.dateList, this.detailsData)
					})
			},
			chooseYear(i) {
				this.years = i;
				this.dataList = []
				this.getDetails()
			},
			chooseMonth(i) {
				this.month = i;
			},
			goDetailSon(val, title, number) {
				console.log(val)
				if (title == "打赏收入" ||title == "打赏支出") {
					uni.navigateTo({
						url: "/pages_my/detailSon?month=" + val + "&title=" + title
					})
				}else{
					uni.navigateTo({
						url: "/pages_my/detailSon?month=" + val + "&number=" + number + "&title=" + title
					})
				}
				
			},

			addDate() {
				let nowDate = new Date()
				let date = {
					year: nowDate.getFullYear(),
					month: (nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1),
					date: nowDate.getDate()
				}
				// this.systemTime = date.year + '-' + date.month + '-' + date.date
				this.years = date.year
				// this.month = "date.month";
				for (let i = 0; i < 10; i++) {
					this.yearsList.push(this.years * 1 - i)
				}
				this.getDetails()
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.date-select {
		padding: 17rpx 40rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 1rpx 6rpx 1rpx rgba(0, 0, 0, 0.08);

		.years {
			position: relative;
			z-index: 10;
		}

		.month-day {
			position: relative;
			z-index: 10;
		}

		.date-common {
			align-items: center;
			margin-right: 30rpx;
			padding: 12rpx 16rpx 12rpx 30rpx;
			background: #FFFFFF;
			border-radius: 33rpx;
			border: 2rpx solid #64B6A8;
			font-size: 30rpx;
			color: #64B6A8;

			.draw-down {
				padding: 70rpx 10rpx 10rpx;
				position: absolute;
				left: -2rpx;
				top: -2rpx;
				right: -2rpx;
				z-index: -1;
				border-radius: 33rpx;
				background-color: #fff;
				border: 1rpx solid #64B6A8;
				color: #333;
				font-size: 26rpx;

				view {
					padding: 10rpx 0;
					text-align: center;
					// border-bottom: 1rpx solid #D6D6D6;
				}
			}
		}
	}

	.detail-list {
		margin: 40rpx 40rpx 50rpx 30rpx;

		.detail-date {
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 500;
			color: #64B6A8;

			.date-left {}

			.date-right {}
		}

		.detail-li {
			padding: 30rpx 0 30rpx 10rpx;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333333;
			border-bottom: 1rpx solid #D6D6D6;
			// &:last-of-type{
			// 	border: none;
			// }
		}
	}
</style>